<template>
  <el-carousel height="100vh">
    <el-carousel-item v-for="(item,index) in imgItem" :key="index">
      <img class="item-img" :src="item.url" alt />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Swiper',
  data() {
    return {
      imgItem: [
        { url: require('../../assets/img/swiper/1.jpg') },
        { url: require('../../assets/img/swiper/2.jpeg') },
        { url: require('../../assets/img/swiper/3.jpg') },
        { url: require('../../assets/img/swiper/4.jpg') },
        { url: require('../../assets/img/swiper/5.jpg') }
      ]
    }
  }
}
</script>

<style >
.el-carousel {
  width: 100%;
  background-color: #88827e;
  box-shadow: 0px 5px 10px 15px rgba(100, 100, 100, 0.5);
}
.item-img {
  display: block;
  height: 100%;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
}
</style>